@import "../common/css/variables.scss";
@import "../../common/css/size.scss";
.navbarM{
  height: $navHeight;
  position: absolute;
  width: 100%;
  bottom: 0;
  border-top: $_1 solid $borderC;
  border-right: none;
  border-left: none;
  .navUl{
    width: 100%;
    height: 100%;
    background: #fff;
  }
  .barItem{
    height: inherit;
    .itemIcon{
      height: $_20;
      width: $_20;
      background-size: $_20;
      background-repeat: no-repeat;
      background-position: center;
      margin-bottom: 0.1rem;
    }
  }

  .barItem:nth-child(1) .itemIcon{

    background-image: url('../img/nav/home.png') ;
  }
  .barItem:nth-child(2) .itemIcon{
    background-image: url('../img/nav/product.png') ;
  }
  .barItem:nth-child(3) .itemIcon{
    background-image: url('../img/nav/support.png') ;
  }
  .barItem:nth-child(4) .itemIcon{
    background-size: $_15;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../img/nav/user.png') ;
  }

  .barItem:nth-child(1).active .itemIcon{
    background-image: url('../img/nav/homed.png') ;
  }
  .barItem:nth-child(2).active .itemIcon{
    background-image: url('../img/nav/productd.png') ;
  }
  .barItem:nth-child(3).active .itemIcon{
    background-image: url('../img/nav/supportd.png') ;
  }
  .barItem:nth-child(4).active .itemIcon{
    background-size: $_15;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../img/nav/userd.png') ;
  }
}